---
title: Introduction
---

import Tweet from '../../components/Tweet';

# Typewind

## Introduction

<div className="flex justify-center px-10 py-5">
  ![Typewind logo](/typewind-logo.png)
</div>

Typewind is a **typesafe** and **zero-runtime** version of Tailwind CSS, a utility-first CSS framework that can be composed to build any design, directly in your markup.

{<div className="hidden flex justify-center mt-5">

  <Tweet />
</div>}

## Tailwind CSS

Typewind is built on top of Tailwind CSS. For more information on Tailwind CSS, please visit their [documentation](https://tailwindcss.com/docs).

## Acknowledgements

- [Colin McDonnell](https://twitter.com/colinhacks)

  This project was was inspired by Colin's [tweet](https://twitter.com/colinhacks/status/1615154756204523521) on what tailwind with type safety and proper autocompletion would look like.
